<template>
    <div style="padding: 15px 20px 15px 5px">
        <div class="pre-text">{{ text }}</div>
        <vol-form ref="form" :labelWidth="80" :load-key="false" :formFields="fields" :formRules="formOptions">
        </vol-form>

        <!--table配置 -->
        <div class="tables">
            <div class="table-item" v-for="(item, index) in tables" :key="index">
                <div class="table-header">
                    <div class="header-text">
                        {{ item.name }}
                    </div>
                    <div class="header-btns">
                        <el-button type="primary" size="mini" :key="bindex" plain
                            @click="tableBtnClick(item, bindex, index)" :icon="btnItem.icon"
                            v-for="(btnItem, bindex) in item.buttons">
                            {{ btnItem.name }}
                        </el-button>
                    </div>
                </div>
                <vol-table :url="item.url" :load-key="false" :index="true" :ref="'table' + index"
                    :tableData="item.tableData" :columns="item.columns" :max-height="250"
                    :pagination-hide="item.pagination" :column-index="true" :ck="true"></vol-table>
            </div>
        </div>


        <div class="form-btns">
            <el-button type="primary" @click="submit" icon="el-icon-check" size="mini">提交</el-button>
            <el-button type="primary" @click="reset" plain icon="el-icon-refresh-right" size="mini">重置</el-button>
        </div>
    </div>
</template>

<script>
// 使用方式：
// 1、新建一个vue页面，把此页面内容复制进去
// 2、router->index.js配置路由，页面上输入地址即可看到数据(也可以把菜单配置上)
// 3、或者参照表单设计页面做动态页面
//**表单设计器的table下载还在开发中
import VolTable from '@/components/basic/VolTable'
import VolForm from '@/components/basic/VolForm'
export default {
    components: { "vol-form": VolForm, 'vol-table': VolTable },
    data() {
        return {
            text: "",
            tabsModel: "0",
            fields: {},
            formOptions: [[]],
            tables: [{}],
            tabs: []
        };
    },
    created() {

    },
    methods: {
        
        tableBtnClick(item, btnIndex, index) {
            if (item.buttons[btnIndex].value == "add") {
                this.$refs["table" + index][0].addRow({});
                return;
            }
            if (item.buttons[btnIndex].value == "del") {
                this.$refs["table" + index][0].delRow();
                return;
            }
        },
        tabsTableBtnClick(item, btnIndex, index) {
            if (item.buttons[btnIndex].value == "add") {
                this.$refs["tabsTable" + index][0].addRow({});
                return;
            }
            if (item.buttons[btnIndex].value == "del") {
                this.$refs["tabsTable" + index][0].delRow();
                return;
            }
        },
        submit() {
            this.$Message.success("submit")
            return;
            this.http.post("url", this.fields, true).then(result => {

            })
        },
        reset() {
            this.$refs.form.reset();
            this.$Message.success("表单已重置")
        },
        download() {
            this.$Message.info("111")
        }
    }
};

VolForm;
</script>
<style lang="less" scoped>
.form-btns {
    text-align: center;
}

.tables {
    padding-left: 15px;

    .table-item {
        padding: 10px;
    }

    .table-header {
        display: flex;
        margin-bottom: 8px;
    }

    .header-text {
        position: relative;
        bottom: -9px;
        flex: 1;
        font-weight: bold;
    }

    .header-btns {
        text-align: right;
    }
}
</style>